<template>
  <div class="bg-fa of">
    <section id="index" class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">微信支付账单申请</span>
        </h2>
        <p class="fl tac subtitle">请选择日期和账单类型进行查询</p>
      </header>

      <div class="bill-container">
        <el-form :inline="true" class="bill-form">
          <el-form-item label="账单日期" class="form-item">
            <el-date-picker v-model="billDate" value-format="YYYY-MM-DD" type="date" placeholder="选择账单日期"
              :disabled-date="disabledDate" class="date-picker" clearable />
          </el-form-item>

          <el-form-item label="账单类型" class="form-item">
            <el-select v-model="billType" placeholder="请选择账单类型" class="type-select" clearable>
              <el-option label="全部" value="ALL"></el-option>
              <el-option label="成功交易" value="SUCCESS"></el-option>
              <el-option label="退款交易" value="REFUND"></el-option>
            </el-select>
          </el-form-item>

          <div class="action-buttons">
            <el-button type="primary" @click="handleQueryBill" :disabled="!billDate || !billType" class="query-btn"
              :icon="Search">
              查询账单
            </el-button>

            <el-button type="success" @click="handleDownloadBill" :disabled="!downloadUrl" class="download-btn"
              :icon="Download">
              下载账单
            </el-button>
          </div>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Download } from '@element-plus/icons-vue'
import billApi from '@/api/bill'

const billDate = ref('')
const billType = ref('ALL')
const downloadUrl = ref('')

const disabledDate = (time) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return time.getTime() >= today.getTime()
}

const handleQueryBill = async () => {
  if (!billDate.value) {
    ElMessage.warning('请选择账单日期')
    return
  }

  try {
    const response = await billApi.queryTradeBill(billDate.value, billType.value)
    downloadUrl.value = response.data
    ElMessage.success('账单查询成功，请点击下载按钮获取账单')
  } catch (error) {
    console.error('查询账单失败:', error)
    ElMessage.error('查询账单失败: ' + (error.response?.data?.message || error.message))
  }
}

const handleDownloadBill = async () => {
  if (!downloadUrl.value) {
    ElMessage.warning('请先查询账单获取下载链接')
    return
  }

  try {
    const response = await billApi.downloadBill(downloadUrl.value)

    const element = document.createElement('a')
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(response.data))
    element.setAttribute('download', `微信支付账单-${billDate.value}-${billType.value}.txt`)
    element.style.display = 'none'
    document.body.appendChild(element)
    element.click()
    document.body.removeChild(element)

    ElMessage.success('账单下载成功')
  } catch (error) {
    console.error('下载账单失败:', error)
    ElMessage.error('下载账单失败: ' + (error.response?.data?.message || error.message))
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.comm-title {
  text-align: center;
  margin-bottom: 30px;
}

.comm-title h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 14px;
  color: #888;
  width: 100%;
}

.bill-container {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bill-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.form-item :deep(.el-form-item__label) {
  font-weight: bold;
  color: #606266;
}

.date-picker,
.type-select {
  width: 220px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.query-btn,
.download-btn {
  padding: 10px 20px;
  font-size: 14px;
}

.query-btn {
  background-color: #409EFF;
  border-color: #409EFF;
}

.download-btn {
  background-color: #67C23A;
  border-color: #67C23A;
}

@media (max-width: 768px) {
  .bill-form {
    flex-direction: column;
    align-items: center;
  }

  .action-buttons {
    width: 100%;
    justify-content: center;
  }
}
</style>